// import React, { ReactNode } from "react";

// interface ListProps {
//   finished: boolean;
//   onLoad: () => Promise<void>;
//   finishedText: string;
//   children: ReactNode;
// }

// interface ListState {
//   loading: boolean;
// }

// export class List extends React.Component<ListProps, ListState> {
//   constructor(props: ListProps) {
//     super(props);
//     this.state = {
//       loading: false,
//     };
//   }

//   handleScroll = () => {
//     const { finished, onLoad } = this.props;
//     const { loading } = this.state;
//     const remainingDistance =
//       document.body.offsetHeight - (globalThis.innerHeight + globalThis.scrollY);

//     if (finished || loading || remainingDistance > 50) return;

//     this.setState({ loading: true }, async () => {
//       await onLoad();
//       this.setState({ loading: false });
//     });
//   };

//   componentDidMount(): void {
//     globalThis.addEventListener("scroll", this.handleScroll);
//   }
//   componentWillUnmount(): void {
//     globalThis.removeEventListener("scroll", this.handleScroll);
//   }

//   render() {
//     const { children, finishedText, finished } = this.props;
//     const { loading } = this.state;

//     return (
//       <div style={{ overflowY: "auto" }}>
//         {/* 更换为实际需要的高度 */}
//         {children}
//         <div style={{ height: 60, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
//           {loading && <div>Loading...</div>}
//           {!loading && finished && <div>{finishedText}</div>}
//         </div>
//       </div>
//     );
//   }
// }
/*****************************************************************************/

import React, { ReactNode, useEffect, useState } from "react";

interface ListProps {
  finished: boolean;
  onLoad: () => Promise<void>;
  finishedText: string;
  children: ReactNode;
}

export function List({ finished, onLoad, finishedText, children }: ListProps) {
  const [loading, setLoading] = useState(false);

  const handleScroll = () => {
    if(loading) return ;
    const remainingDistance =
      document.body.offsetHeight - (globalThis.innerHeight + globalThis.scrollY);

    console.log(finished , loading , remainingDistance > 50)    
    if (finished || loading || remainingDistance > 50) return;


    setLoading(true);
    onLoad()
      .then(() => {
        setLoading(false);
      })
      .catch((error) => {
        console.error("Failed to load data:", error);
        setLoading(false);
      }).finally(() => setLoading(false))
  };

  useEffect(() => {
    globalThis.addEventListener("scroll", handleScroll);
    return () => {
      globalThis.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <div style={{ overflowY: "auto" }}>
      {/* 更换为实际需要的高度 */}
      {children}
      <div
        style={{
          height: 60,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center'
        }}
      >
        {loading && <div>Loading...</div>}
        {!loading && finished && <div>{finishedText}</div>}
      </div>
    </div>
  );
}

